import React, { forwardRef } from 'react';
import { Modal, Form, Input, message, Select } from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
const UserBindingForm = forwardRef((props, ref) => {
  const { onCancel, onCreate, handleSubmit, visible } = props;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 },
    },
  };
  return (
    <Modal
      visible={visible}
      title="绑定车辆"
      okText="绑定"
      onCancel={onCancel}
      onOk={onCreate}
    >
      <Form onSubmit={handleSubmit} ref={ref}>
        <FormItem style={{ display: 'none' }} name="userAccountSid">
          <Input />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="车辆VIN号"
          name="vin"
          rules={[{ required: true, message: '请输入要绑定车辆VIN号' }]}
        >
          <Input placeholder="请输入要绑定车辆VIN号" />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="与用户关系"
          name="relationship"
          rules={[{ required: true, message: '请选择车辆与用户关系' }]}
        >
          <Select placeholder="请选择车辆与用户关系">
            <Option value="0">非车主</Option>
            <Option value="1">车主</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  );
})

class TboxBindingModel extends React.Component {
  state = {
    visible: false,
  };
  componentWillMount() {
  }
  componentDidMount() {
  }
  showModel = (userAccountSid) => {
    const { form } = this;
    form.setFieldsValue({
      userAccountSid,
    });
    this.setState({
      visible: true,
    });
  }
  handleCancel = () => {
    const { form } = this;
    form.resetFields();
    // const { dispatch } = this.props;
    // dispatch({
    //   type: 'baseUser/fetch',
    // });
    this.setState({ visible: false });
  }


  handleVinCreate = () => {
    const { dispatch } = this.props;
    const { form } = this;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      dispatch({
        type: 'baseUser/bindVehicle',
        payload: values,
        callback: (data) => {
          if (data.code === '200') {
            message.success('操作成功');
          } else {
            message.error(data.description, 3);
          }
        },
      }).then(() => {
        dispatch({
          type: 'baseUser/fetchVehicleByUserAccountSid',
          payload: this.props.userAccountSid,
          callback: (data) => {
            this.props.setVehicle(data);
          },
        });
      });
      form.resetFields();
      this.setState({ visible: false });
    });
  }
  saveFormRef = (form) => {
    this.form = form;
  }

  render() {
    return (
      <div>
        <UserBindingForm
          ref={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleVinCreate}
          handleSubmit={this.handleSubmit}
        />
      </div>
    );
  }
}

export default TboxBindingModel;
